<template>
	<view class="work-container">
		<!-- 搜索 -->
		<uni-row>
			<view class="select-container">
				<view class="select-input uni-input-wrapper">
					<uni-row>
						<uni-col :span="21">
							<input class="uni-input" placeholder="请输入设备编码" v-model="messageParams.phouseCode"
								@input="filterOptions" />
						</uni-col>
						<uni-col :span="3">
							<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">
								<uni-icons type="clear" size="20"></uni-icons>
							</text>
						</uni-col>
					</uni-row>
				</view>
				<view class="select-dropdown " v-if="showOptions">
					<view v-for="item in filteredOptions" :key="item.phouseCode"
						@click="item.phouseCode !== '没有匹配数据~~' && selectOption(item)" class="select-dropdown-child">
						{{ item.phouseCode }}
					</view>

				</view>
			</view>
		</uni-row>
		<!-- 数据表格 -->
		<uni-section title="自动饲喂机记录" type="line"></uni-section>
		<uni-row style=" display: flex;justify-content: center;">
			<uni-col :span="24">
				<view>
					<view class="uni-container">
						<view class="table-header">
							<!-- 表头 -->
							<view class="header-row" style="width: 100%;">
								<view class="header-cell" style="width: 20%;">栏舍编码</view>
								<view class="header-cell" style="width: 20%">栏舍类型</view>
								<view class="header-cell" style="width: 20%">消耗</view>
								<view class="header-cell" style="width: 20%">类型</view>
								<view class="header-cell" style="width: 20%">时间</view>
							</view>
						</view>
						<scroll-view class="table-body" scroll-y="true" style=" width: 100%; height: 200px;">
							<!-- 表格数据 -->
							<view class="body-row" v-for="(item, index) in messageList" :key="index">
								<view class="body-cell msg-txt" style="width: 30%;">
									{{ item.phouseCode }}
								</view>

								<view class="body-cell msg-txt" v-if="item.phouseType == 1">
									{{$dict.selectDictLabel('hmy_park_type', 1)}}
								</view>
								<view class="body-cell msg-txt" v-else-if="item.phouseType ==2">
									{{$dict.selectDictLabel('hmy_park_type', 2)}}
								</view>
								<view class="body-cell msg-txt" v-else-if="item.phouseType ==3">
									{{$dict.selectDictLabel('hmy_park_type', 3)}}
								</view>

								<view class="body-cell msg-txt" style="width: 20%;">
									{{ item.materiaFeedConsumeNum + ' KG'}}
								</view>

								<view class="body-cell msg-txt">
									{{item.materiaFeedType}}
								</view>
								<view class="body-cell msg-txt" style="width: 30%;">
									{{ item.creationDate.slice(5, 16) }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uni-col>
		</uni-row>
		<!-- 图表 -->
		<uni-section title="自动饲喂机图表" type="line"></uni-section>
		<!-- 设备轮播图 -->
		<uni-row style=" display: flex;justify-content: center;">
			<uni-col :span="24">
				<uni-swiper-dot @clickItem="clickItem" mode="default" field="content">
					<swiper class="swiper-box" indicator-dots="true"
						style="width: 100%; height: 140pxs;margin-bottom:20rpx">
						<swiper-item v-for="(item, index) in autofeedingList" :key="index"
							style="background-color: #efefef;">
							<view class="swiper-item" @click.stop="tableQuery(item)">
								<uni-card class="parent-icon" shadow="hover" style="background-color: #fff;">
									<i v-if="item.autofeedingStart==='1'" class="uni-icon-success green-icon" title="运行"
										@click.stop="icoeUp(item)"></i>
									<i v-else-if="item.autofeedingStart==='2'" class="uni-icon-error rea-icon"
										title="关闭" @click.stop="icoeUp(item)"></i>


									<view class="card-content">
										<uni-row class="card-row">
											<uni-col :span="8" class="row-item">设备品牌</uni-col>
											<uni-col :span="8" class="row-item">料仓容量</uni-col>
											<uni-col :span="8" class="row-item">栏舍编码</uni-col>
										</uni-row>
										<uni-row>
											<uni-col :span="8" class="row-item">{{ item.autofeedingBand }}</uni-col>
											<uni-col :span="8" class="row-item">{{ item.autofeedingNum }}</uni-col>
											<uni-col :span="8" class="row-item">{{ item.phouseCode }}</uni-col>
										</uni-row>
									</view>
								</uni-card>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

			</uni-col>
		</uni-row>
		<!-- 图表 -->
		<uni-row>
			<view class="content">
				<!-- #ifdef APP-PLUS || H5 -->
				<view :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>

				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<view>非 APP、H5 环境不支持</view>
				<!-- #endif -->
			</view>
		</uni-row>
		<!-- 新增加号 -->
		<!-- <uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" @fabClick="toGasAdd"/> -->
	</view>

</template>

<script>
	import {
		list,
		selectbyid,
		add,
		del,
		edit
	} from "@/api/hmy/autofeeding";
	import {
		findCode,
		listMsg,
		getTypes
	} from "@/api/hmy/material";
	import {
		findPhouseCodeAll
	} from "@/api/hmy/equipment";


	export default {
		name: "autofeeding",
		data() {
			return {
				option: {},
				//增加的加号
				horizontal: 'right',
				vertical: 'bottom',
				pattern: {
					buttonColor: '#55aa7f',

				},
				messageList: [],
				//饲料类型
				typesList: [],
				showClearIcon: false,
				filteredOptions: [], // 过滤后的选项列表
				showOptions: false, // 是否显示下拉列表
				messageParams: {
					type: undefined,
					//position: undefined,
					dateStart: undefined,
					dateEnd: undefined,
					phouseCode: ""
				},



				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 自动饲喂机表格数据
				autofeedingList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 日期范围
				dateRange: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					autofeedingBand: "",
					autofeedingId: "",
					phouseCode: ""


				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
					autofeedingId: [{
							required: true,
							message: "编号不能为空",
							trigger: "blur"
						},
						{
							validator: async (rule, value, callback) => {
								var autofeedingId = this.form.autofeedingId;
								if (autofeedingId != undefined) {
									await selectbyid(autofeedingId).then(response => {
										if (response.data != null) {
											callback(new Error("已存在"))
										}
									})
								}
							},
							trigger: 'blur'
						}
					],
					autofeedingBand: [{
						required: true,
						message: "品牌不可为空",
						trigger: "blur"
					}],
					autofeedingElp: [{
						required: true,
						message: "电气参数不能为空",
						trigger: "blur"
					}],
					autofeedingNum: [{
						required: true,
						message: "饲养数量不能为空",
						trigger: "blur"
					}],
					phouseType: [{
						required: true,
						message: "栏舍类型不能为空",
						trigger: "blur"
					}]
				}

			};
		},
		created() {
			this.getTypesList();
			this.getList();
		},
		methods: {
			//动态获取饲料数据
			getTypesList() {
				getTypes().then(res => {
					this.typesList = res.data;
				})
			},
			/** 查询角色列表 */
			getList() {
				uni.showLoading({
					title: "加载中"
				})
				list(this.queryParams).then(response => {
					this.autofeedingList = response.rows;
					this.total = response.total;

				});
				/** 信息 */
				listMsg(this.messageParams).then(response => {
					this.messageList = response.rows;
					//console.log(this.messageList)
					this.messageList.forEach(messageItem => {
						this.typesList.forEach(typeItem => {
							if (messageItem.materiaFeedType == typeItem.materiaFeedTypeId) {
								messageItem.materiaFeedType = typeItem.materiaFeedType
							}
						})
					})
					this.initOption()
					this.initEchartDom()
				});
				/** 栏舍下拉选择 */
				findCode().then(response => {
					this.parkList = response.data;
					console.log(this.parkList)
				});
				uni.hideLoading();
			},
			clearIcon: function() {
				this.messageParams.phouseCode = '';
				this.showClearIcon = false;
				this.tableQuery()
			},
			filterOptions() {
				if (this.messageParams.phouseCode.trim() === '') {
					this.filteredOptions = [];
					this.showOptions = false;
				} else {
					this.showClearIcon = true;
					this.filteredOptions = this.parkList.filter((item) =>
						item.phouseCode.includes(this.messageParams.phouseCode)
					);
					if (this.filteredOptions.length === 0) {
						// 如果过滤后的结果为空，手动添加一条数据
						this.filteredOptions.push({
							phouseCode: '没有匹配数据~~'
						});
					}
					this.showOptions = true;
				}
			},
			selectOption(item) {
				this.messageParams.phouseCode = item.phouseCode; // 更新输入框的值
				this.showOptions = false;
				this.tableQuery()
			},
			tableQuery(item) {
				if (item != null) {
					this.showClearIcon = true;
					if (item.phouseCode != null) {
						this.messageParams.phouseCode = item.phouseCode
					}
				}
				/** 信息 */
				listMsg(this.messageParams).then(response => {
					this.messageList = response.rows;
					//console.log(this.messageList)
					this.messageList.forEach(messageItem => {
						this.typesList.forEach(typeItem => {
							if (messageItem.materiaFeedType == typeItem.materiaFeedTypeId) {
								messageItem.materiaFeedType = typeItem.materiaFeedType
							}
						})
					})

				});
			},
			initOption() {

				// 指定图表的配置项和数据
				this.option = {
					title: {
						text: '饲料投喂量',
						left: 'center',
						textStyle: {
							fontSize: 12 // 你可以设置为你需要的字体大小
						}
					},
					tooltip: {
						trigger: 'axis'
					},
					// toolbox: {
					//   show: true,
					//   feature: {
					//     dataZoom: {
					//       yAxisIndex: 'none'
					//     },
					//     dataView: {readOnly: false},
					//     magicType: {type: ['line', 'bar']},
					//     restore: {},
					//     saveAsImage: {}
					//   }
					// },
					dataZoom: [{
						type: 'inside',
						show: true,
						realtime: true,
						start: 0,
						end: 5

					}],
					xAxis: {
						data: this.messageList.map(item => item.creationDate)
					},
					yAxis: {
						name: '投喂量(kg)',
						type: 'value',
						min: 0

					},
					series: this.seriesData()
				};

				myChart.setOption(option);
			},
			/** 动态生成折线图*/
			/** 动态生成折线图系列 */
			seriesData() {
				let series = [];
				this.parkList.forEach(cloud => {
					// 筛选出具有相同设备站房代码的messageList项
					const messageItems = this.messageList.filter(item => item.phouseCode === cloud.phouseCode);
					// 生成温度数据系列
					const temperatureSeries = {
						name: '投喂量' + cloud.phouseCode,
						type: 'line',
						symbolSize: 8,
						data: messageItems.map(item => item.materiaFeedConsumeNum)
					};

					// 将生成的温度和湿度系列添加到系列数组中
					series.push(temperatureSeries);
				});
				return series;
			},

			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},

			// 表单重置
			reset() {
				this.form = {
					id: undefined,
					autofeedingId: undefined,
					autofeedingBand: undefined,
					autofeedingElp: undefined,
					autofeedingNum: undefined,
					monitoPowerUp: undefined,
					monitoInMicro: undefined,
					monitoInSpeaker: undefined,
					autofeedingCapacity: undefined,
					workTemp: undefined,
					workHumidity: undefined,
					qualityGrade: undefined,
					electricControlGear: undefined,
					network: undefined,
					phouseType: undefined,
					phouseCode: undefined,
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.dateRange = [];
				//this.resetForm("queryForm");
				this.queryParams = {};
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			//添加按钮
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加进货信息";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids
				selectbyid(id).then(response => {
					this.form = response.data;
					this.open = true;
					this.title = "修改气体交换机信息";
				});
			},

			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.id != undefined) {

							edit(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							add(this.form).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const id = row.id || this.ids;
				this.$modal.confirm('是否确认删除进货编号为"' + id + '"的数据项？').then(function() {
					return del(id);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},

		}
	};
</script>
<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts() {
				// 监听 service 层数据变更
				myChart.setOption(this.option)
			}
		}
	}
</script>
<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		margin-top: 50px;
		width: 100%;
		height: 300px;
	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 16px;
		line-height: inherit;
	}

	/* #endif */

	.select-container {
		position: relative;
		padding: 5px 20px;
		background-color: #F2F2F2;
	}

	.select-input {
		border-radius: 10px;
		/* 设置圆角半径为5px */
		border: 1px solid #ccc;
		/* 添加边框样式 */
		padding: 5px;
		/* 添加内边距 */
		background-color: #fff;
	}

	.select-dropdown {
		width: 80%;
		position: absolute;
		top: 100%;
		z-index: 999;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 10px;
	}

	.select-dropdown-child {
		padding: 5px 40px;
		cursor: pointer;
	}


	.card-content {
		padding: 14px;
		background-color: #ededed;
	}

	.card-row {
		margin-bottom: 5px;
		border-bottom: 1px solid #8f939c;
	}

	.row-item {
		text-align: center;
		/* 其他必要的样式 */
	}

	.parent-icon {
		position: relative;
	}

	.green-icon {
		font-size: 20px;
		position: absolute;
		right: 15px;
		top: 15px;
		color: green;
		z-index: 9;
	}

	.rea-icon {
		font-size: 20px;
		position: absolute;
		right: 15px;
		top: 15px;
		color: red;
		z-index: 9;
	}

	.header-row {
		display: flex;
		font-size: 25rpx;
		margin-bottom: 5px;
	}

	.header-cell {
		text-align: center;
		border-bottom: 1px solid #ccc;
	}

	.body-row {
		display: flex;
		font-size: 25rpx;
	}

	.body-row:nth-child(odd) .body-cell {
		background-color: #f2f2f2;
		/* 灰色背景 */
	}

	.body-cell {
		text-align: center;
		padding: 10rpx 0;
		border-bottom: 1px solid #ccc;
	}

	.msg-txt {
		flex: 1;
		text-align: center;
		font-size: 20rpx;
	}
</style>